<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id='app'>
    <div>
      <label>key:<input type="text" v-model="id"></label>
      <label>姓名<input type="text" v-model="name"></label>
      <input type="button" value="添加" @click="add" />
    </div>

    
    <p v-for="(item,index) in list" :key="index">
      <input type="checkbox"/>
      {{item.id}}--{{item.name}}
    </p>
  </div>
</body>
<script src="../dist/vue.js"></script>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      id:"",
      name:"",
      list:[
        {id:1, name:'张三'},
        {id:2, name:'李四'},
        {id:3, name:'王五'},
      ],
    },
    methods:{
      add(){
        this.list.unshift({id:this.id,name:this.name});
      }
    }
  });
</script>
